<template>
  <div class="sider">
    <el-menu :default-active="active" class="el-menu-vertical-demo">
      <template v-for="(item,index) in routes">
        <template v-if="!item.children">
          <el-menu-item :index="`${index}`" :key="`${index}`" @click="navTo(item.path,index)">
            <i :class="item.icon"></i>
            <span slot="title">{{item.meta.title}}</span>
          </el-menu-item>
        </template>

        <template v-else>
          <el-submenu :index="`${index}`" :key="`${index}`">
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{item.meta.title}}</span>
            </template>
            <el-menu-item-group>
              <template v-for="(sub,idx) in item.children">
                <el-menu-item
                  :index="`${index}-${idx}`"
                  :key="`${index}-${idx}`"
                  @click="navTo(sub.path,`${index}-${idx}`)"
                >{{sub.meta.title}}</el-menu-item>
              </template>
            </el-menu-item-group>
          </el-submenu>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
import Cookie from 'js-cookie'
export default {
  components: {},
  data(){
      return{
          active:'0'
      }
  },
  mounted(){
      const current_idx = Cookie.get('current_path_index');
      if(current_idx){
          this.active = current_idx+'';
      }
  },
  computed: {
    routes() {
      let routes = this.$router.options.routes;
      return routes[2].children;
    }
  },
  methods: {
    navTo(path,idx,title) {
        Cookie.set('current_path_index',idx);
        this.$router.push({ path });
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.sider {
  overflow: hidden;
}
/deep/.el-menu-item.is-active {
  background-color: #ecf5ff;
}
/deep/.el-menu {
  border: none;
}
</style>